<script>
import hotHistory from "@/components/hotHistory.vue";
import { public_status } from "../store/public_status";
import { useRouter } from "vue-router";
import { reactive, ref } from "@vue/reactivity";
import { getShopData } from "../api/index";
import { watch } from "@vue/runtime-core";

export default {
  components: { hotHistory },
  setup() {
    // # 底部导航栏显示隐藏 购物车高度
    public_status().display = false;

    let data = reactive({
      toshow: false,
      inpvalue: "",
      shopData: [],
      showempty: false,
    });
    let historylist = ["袜子"];
    const con = ref();

    // 获取数据
    getShopData().then((vl) => {
      data.shopData = vl.listData;
      console.log(data.shopData);
    });

    // 关键词搜索
    let tolist = () => {
      return data.shopData.filter((item) => item.title.includes(data.inpvalue));
    };

    // # 路由配置
    let router = useRouter();

    // 点击热门关键词
    let listsearch = (item) => {
      data.inpvalue = item;
    };

    // 进入列表页面
    let tosearch = (e) => {
      if (e.keyCode == 13) {
        data.inpvalue = e.target.value;
        data.toshow = true;

        if (con._value.children.length == 0) {
          data.showempty = true;
        } else {
          data.showempty = false;
        }
      }
    };

    // 监听输入框是否为空
    watch(
      () => data.inpvalue,
      () => {
        if (data.inpvalue == "") {
          data.toshow = false;
        }
      },
      { deep: true, immediate: true }
    );
    watch(
      () => data.toshow,
      () => {if(data.toshow){
        historylist.push(data.inpvalue)

      }}
    );
    return {
      router,
      data,
      listsearch,
      tosearch,
      tolist,
      con,
      historylist,
    };
  },
};
</script>

<template>
  <div class="searchView">
    <!-- 搜索框 -->
    <div class="search_box">
      <span class="icon-fangdajing1 iconfont"></span>
      <input
        type="text"
        class="search"
        placeholder="请输入您想要的类型"
        v-model="data.inpvalue"
        @keyup="tosearch"
      />
      <div class="cancel" @click="router.back()">取消</div>
    </div>
    <!-- 搜索框 -->

    <!-- 热门搜索与历史搜索-->
    <hot-history
      v-show="!data.toshow"
      @listsearch="listsearch"
      :historylist="historylist"
    ></hot-history>

    <!-- 商品列表 -->

    <div v-show="data.toshow">
      <div class="shop_list" ref="con" v-show="!data.showempty">
        <div v-for="items in tolist()" :key="items.id">
          <router-link :to="'/details?id=' + items.id" class="item">
            <div class="img">
              <img :src="items.imgUrl" alt="" />
            </div>
            <div class="text">
              <div class="name">{{ items.title }}</div>
              <!-- <div class="tips">副标题</div> -->
              <div class="price">
                ￥<span>{{ items.price }}</span>
                <p class="oldPrice">{{ items.price + 20 }}</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>

      <div class="empty" v-show="data.showempty">
        <img src="../assets/imgs/isempty.svg" alt="" />
      </div>
    </div>
    <!-- 商品列表 -->
  </div>
</template>

<style lang="scss" scoped>
.searchView {
  // 搜索框
  .search_box {
    padding: 20px 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .search {
      height: 38px;
      flex: 1;
      margin-right: 10px;
      background-color: #f7f7f8;
      border: transparent;
      border-radius: 5px;
      text-indent: 45px;
    }

    .icon-fangdajing1 {
      color: #6c7476;
      font-size: 17px;
      position: absolute;
      left: 30px;
      top: 0;
      bottom: 0;
      line-height: 78px;
    }

    .cancel {
      font-size: 14px;
      color: #302a28;
      font-weight: 700;
    }
  }

  // 输入框文字
  .search::-webkit-input-placeholder {
    color: #8e8e8f;
    font-size: 12px;
    font-weight: 600;
  }

  // todo 商品列表
  .shop_list {
    padding: 0 15px;

    .item {
      display: flex;
      background: #f9f9f9;
      border-radius: 15px;
      margin-bottom: 15px;

      position: relative;

      > .img {
        width: 115px;
        margin: 5px;

        > img {
          width: 100%;
        }
      }

      > .text {
        flex: 1;
        padding-top: 15px;

        > .name {
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          margin-bottom: 8px;
        }

        > .tips {
          font-size: 10px;
          font-weight: 700;
          color: #444;
          margin-bottom: 20px;
        }

        > .price {
          display: flex;
          align-items: flex-end;

          color: #333;
          font-weight: bold;

          > span {
            font-size: 18px;
            line-height: 18px;
          }

          > .oldPrice {
            color: #c6c6c6;
            text-decoration: line-through;
            margin-left: 5px;
            font-size: 10px;
            font-weight: normal;
          }
        }
      }

      > .btn {
        position: absolute;
        right: 20px;
        bottom: 20px;

        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background: #56ddb0;
        border-radius: 100%;

        > i {
          font-size: 20px;
          color: #fff;
        }

        &:active {
          transform: translateY(-1px);
          background: #45c298;
        }
      }
    }
  }
}
.empty {
  img {
    width: 100%;
    height: 100%;
    margin: 50px auto;
  }
}
</style>